<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       
        // var age = 8;  // 16  18
        // var people = {
        //     user : "李华",
        //     age : 5 ,  // 15
        //     say : function(){
        //         console.log(this)   // people
        //         this.age *= 3   // 15
        //     },
        //     doTing : () => {
        //         console.log(this)   // window
        //         this.age *= 2;      // 16
        //         age += 2            // 18
        //     }
        // }
        // people.say()
        // people.doTing()
        // console.log(people.age)
        // console.log(this.age)

        
        // var age = 8;   // 28 18   38
        // var people = {
        //     user : "李华",
        //     age : 5 ,  // 15
        //     say : function(){
        //         console.log(this)   // people
        //         setTimeout(() => {   
        //             this.age -= 10
        //             age += 20
        //             console.log(this)     // people
        //             console.log(this.age)  // -5
        //             console.log(age)   // 28   
        //         },2000)
        //     },
        //     doTing : () => {
        //         console.log(this)   // window
        //         setTimeout(function(){
        //             this.age -= 10     // 18
        //             age += 20    // 38
        //             console.log(this)  // window  
        //             console.log(this.age)  // 18  38
        //             console.log(age)   // 38
        //         },2000)
        //     }
        // }
        // people.say()
        // people.doTing()


        // var age = 8;  // -2   // -12
        // var people = {
        //     user : "李华",
        //     age : 5 ,  // -5   // -15
        //     say : function(){
        //         console.log(this)   // people
        //         setTimeout(() => {   
        //             var _this = this   // this   _this  -> people
        //             this.age -= 10    // 5 - 10 = -5
        //             _this.age -= 10   // -5 -10 = -15
        //             console.log(this)     // people
        //             console.log(this.age)  // -15   
        //             console.log(_this.age)  // -15
        //             console.log(age) // 8
        //         },2000)
        //     },
        //     doTing : () => {
        //         console.log(this)   // window
        //         setTimeout(function(){
        //             var _this = this
        //             this.age -= 10   // 8 -  10 = -2
        //             _this.age -= 10  // -2 - 10 = -12
        //             console.log(this)  // window
        //             console.log(this.age) // -12
        //             console.log(_this.age) // -12
        //             console.log(age)   // -12
        //         },2000)
        //     }
        // }
        // people.say()
        // people.doTing()

        // var age = 5
        // var people = {
        //     age : 5 , 
        //     say : () => {
        //         setTimeout(function(){
        //             this.age *= 5
        //             age += 5
        //             console.log(this.age)   //30
        //             console.log(age)  // 30
        //             console.log(people.age) // 5
        //         }.bind(this) , 2000)
        //     }
        // }
        // people.say()
        // console.log(people.age) // 5


        var age = 5  
        var people = {
            age : 3 , 
            say : function() {
                setTimeout(function(){  // window.setTimeout.bind(people)
                    this.age *= 5   // 3 * 5 = 15
                    age += 5   // 5 +  5 = 10
                    console.log(this.age)   // 15
                    console.log(age)  // 10
                    console.log(people.age) // 15
                }.bind(this) , 2000)
            }
        }
        people.say()

        // var age = 5  
        // var people = {
        //     age : 3 , 
        //     say : () =>  {
        //         setTimeout(function(){ 
        //             this.age *= 5  
        //             age += 5  
        //             console.log(this.age)  // 30
        //             console.log(age)    // 30
        //             console.log(people.age) // 3
        //         }.bind(this) , 2000)
        //     }
        // }
        // people.say.bind(this)()    // 迷惑行为

        // var age = 5  
        // var people = {
        //     age : 3 , 
        //     say : () =>  {
        //         setTimeout(function(){ 
        //             this.age *= 5  
        //             age += 5  
        //             console.log(this.age)  // 30
        //             console.log(age)    // 30
        //             console.log(people.age) // 3
        //         }.bind(this) , 2000)
        //     }
        // }
        // people.say.bind(people)() 



        // 总结 如何确定this指向
            // 1 是不是箭头函数  ->  箭头没有this -> 不能修改this -> 出现了指向父级挂靠的环境对象
            // 2 是否修改了this  
            // 3 谁调用

    </script>
</body>
</html>